<template>
  <!-- 使用fragment解决组件递归菜单栏不能折叠的问题 -->
  <!-- 递归的时候外面套了一层div(不套div不行模板没有根),element的css选择器就找不里面的span了和那个小箭头了 -->
  <!-- 因为element用的选择器是子类选择器一层一层找的,递归的时候多加了一层div,选择器就找不到了 -->
  <!-- 此处使用fragment代替div,因为fragment编码但不渲染成标签 -->
  <fragment>
    <!-- 无子集 -->
    <el-menu-item :index="basePath" v-if="!item.subMenu">
      <!-- <i :class="item.icon" v-if="showIcon"></i> -->
      <span slot="title">{{item.title}}</span>
    </el-menu-item>

    <!-- 有子集 -->
    <el-submenu :index="basePath" v-else>
      <template slot="title">
       <i :class="item.icon" class="iconfont" style="margin-right: 5px;" v-if="showIcon"></i>
        <span>{{item.title}}</span>
      </template>
      <NavItem
        v-for="ite in item.subMenu"
        :key="ite.url"
        :item="ite"
        :basePath="ite.path"
        :showIcon="false"
      />
    </el-submenu>
  </fragment>
</template>
<script>
export default {
  name: "NavItem",
  data() {
    return {};
  },
  props: ["item", "basePath", "showIcon"],
};
</script>